import {BaseProps} from "../../../App";
import React from "react";
import "./Configs.css"
import {Divider} from "@material-ui/core";
import Typography from "@material-ui/core/Typography";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Input from "@material-ui/core/Input";
import {ProjectApi} from "../../../framework/api/ProjectApi";
import {ProjectModel, ProjectType} from "../../model/ProjectModel";
import {ConfigModel} from "../../model/ConfigModel";

export interface ConfigState {
    edit: boolean,
    project?: ProjectModel,
    config?: ConfigModel
}

export class Configs extends React.Component<BaseProps, ConfigState> {

    constructor(props: BaseProps) {
        super(props);
        this.state = {
            edit: false,
            project: {name: "", type: ProjectType.COMMON, id: "", description: ""},
            config:{projectId:"",clusterConfig:{dockerBasePath:""},id:""}
        }
    }

    componentDidMount(): void {
        ProjectApi.find(this.props.match.params.projectId).then(project => {
            this.setState({project: project})
        });
        ProjectApi.findConfig(this.props.match.params.projectId).then(config => {
            this.setState({config: config})
        })
    }

    render(): React.ReactElement | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        return <div className='main-content'>
            <div className='config-content'>
                <Typography>项目信息</Typography>
                <Divider/>
                <FormControl fullWidth={true}>
                    <InputLabel>名称:</InputLabel>
                    <Input disabled={true} value={this.state.project?.name}/>
                </FormControl>
                <FormControl fullWidth={true}>
                    <InputLabel>描述:</InputLabel>
                    <Input disabled={true} value={this.state.project?.description}/>
                </FormControl>
            </div>
            <div className='config-content'>
                <Typography>集群信息</Typography>
                <Divider/>
                <FormControl fullWidth={true}>
                    <InputLabel>URL:</InputLabel>
                    <Input disabled={true} value={this.state.config?.clusterConfig.dockerBasePath}/>
                </FormControl>
            </div>
        </div>;
    }
}